<template>
    <view class="container">
        <!-- 药品组合列表区域 -->
        <view class="group-list">
            <uni-swipe-action>
                <uni-swipe-action-item
                    v-for="(group, index) in filteredGroupList" 
                    :key="index"
                    :right-options="swipeOptions"
                    @click="handleSwipeClick($event, group.id, group.categoryStatus, group.categoryName)"
                >
                    <view class="group-item">
                        <view class="group-info">
                            <text class="group-name">{{ group.categoryName }}</text>
                            <text class="group-medicines">{{ group.drugs }}</text>
                        </view>
                        <view class="group-detail">
                            <!-- 传递 group.id 和 group.categoryName 作为参数 -->
                            <button class="detail-btn" size="mini" plain @click="navigateToEdit(group.id, group.categoryName)">详情</button>
                        </view>
                    </view>
                </uni-swipe-action-item>
            </uni-swipe-action>
        </view>
    </view>
</template>

<script>
import { useGroupStore } from '@/store/group';
import { onMounted, ref, computed } from 'vue'; // 引入 computed

const groupStore = useGroupStore();

export default {
    setup() {
        const groupList = ref([]); // 使用 ref 来创建响应式数据

        // 计算属性，根据 categoryStatus 过滤 groupList
        const filteredGroupList = computed(() => {
            return groupList.value.filter(group => group.categoryStatus === 0);
        });

        onMounted(async () => {
            try {
                // 假设 getAllGroupById 是异步操作，等待它完成
                await groupStore.getAllGroupById(); 
                // 获取数据完成后更新 groupList
                groupList.value = groupStore.category; 
            } catch (error) {
                console.error('获取药品组合列表失败:', error);
                uni.showToast({
                    title: '获取药品组合列表失败',
                    icon: 'none'
                });
            }
        });

        return {
            groupList,
            filteredGroupList, // 返回 filteredGroupList
            groupStore,
        };
    },
    data() {
        return {
            swipeOptions: [
                {
                    text: '删除',
                    style: {
                        backgroundColor: '#dd524d', // 删除按钮的背景颜色
                    },
                },
            ],
        };
    },
    methods: {
        // 处理滑动删除
        handleSwipeClick(e, id, status, categoryName) {
            if (e.content.text === '删除') {
                this.deleteGroup(id, status, categoryName); // 调用删除方法
            }
        },

        // 删除药品组合
        deleteGroup(id, status, categoryName) {
            uni.showModal({
                title: '提示',
                content: `确定要删除 "${categoryName}" 这个药品组合吗？`,
                success: (res) => {
                    if (res.confirm) {
                        // 直接从 groupList 中移除已删除的项
                        this.groupList = this.groupList.filter(group => group.id !== id);
                        this.groupStore.deleteGroup(id, status)
                        uni.showToast({
                            title: '删除成功',
                            icon: 'success',
                        });
                    }
                },
            });
        },

        // 跳转到编辑页面
        navigateToEdit(id, categoryName) {
            // 将 group.id 和 group.categoryName 作为参数传递
            uni.navigateTo({
                url: `/pages/group/groupDetail?id=${id}&categoryName=${encodeURIComponent(categoryName)}`,
            });
        },
    },
};
</script>

<style lang="scss">
.container {
    padding: 20rpx;
    background-color: #f5f5f5;
    min-height: 100vh;
}

// 药品组合列表区域样式
.group-list {
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

    .group-item {
        display: flex;
        align-items: center;
        padding: 20rpx;
        border-bottom: 1rpx solid #f5f5f5;

        &:last-child {
            border-bottom: none;
        }

        .group-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .group-name {
                font-size: 28rpx;
                color: #333;
                margin-bottom: 16rpx;
            }

            .group-medicines {
                font-size: 24rpx;
                color: #666;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                max-width: 400rpx; // 限制最大宽度，根据需要调整
            }
        }

        .group-detail {
            .detail-btn {
                font-size: 24rpx;
                color: #2ac2d1;
                border-color: #2ac2d1;

                &::after {
                    border-color: #2ac2d1;
                }
            }
        }
    }
}
</style>